
<template>
  <!-- 项目经营-收入主页面 4-2 -->
  <div class="table-wrap">
    <div class="table-top">
      <a-input-search placeholder="请输入内容" v-model="search" class="search" @search="onSearch" />
      <a-button type="primary" class="buttonColorGreen ml10 mr10">查询</a-button>
      <a-button type="primary" class="buttonColorGreen ml10 mr10" @click="reset">重置</a-button>
    </div>
    <div class="table">
      <a-table :columns="columns" :dataSource="tableData" bordered>
        <span slot="details">
          <router-link to="">
            <a-button type="primary" class="buttonColorGreen">
              <a-icon type="zoom-in" />
              详情</a-button>
          </router-link>
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
const columns = [{   //表格表头
  title: '序号',
  width: '70px',
  dataIndex: 'number',
  scopedSlots: { customRender: 'number' },
},
{
  title: '项目名称',
  className: 'objectName',
  dataIndex: 'objectName',
},
{
  title: '项目编号',
  dataIndex: 'objectNum',
},
{
  title: '签约金额',
  dataIndex: 'income',
},

{
  title: '累计开票次数',
  dataIndex: 'expenditure',
},
{
  title: '累计开票金额',
  dataIndex: 'money',
},
{
  title: '累计到账金额',
  dataIndex: 'profit',
},
{
  title: '应收账款',
  dataIndex: 'profitMargin',
},
{
  title: '',
  scopedSlots: { customRender: 'details' },
},
];

const tableData = [//表格数据
  {
    number: '1',
    objectName: '南昌县A项目',
    objectNum: '300,000.00',
    income: '30000000',
    expenditure: 2,
    money: '500.000',
    profit: '500.000',
    profitMargin: "250.0005"
  },
  {
    number: '2',
    objectName: '南昌县A项目',
    objectNum: '1,256,000.00',
    income: '30000000',
    expenditure: 3,
    money: '500.000',
    profit: '500.000',
    profitMargin: "25"
  },
  {
    number: '3',
    objectName: '南昌县A项目',
    objectNum: '120,000.00',
    income: '30000000',
    expenditure: 4,
    money: '500.000',
    profit: '500.000',
    profitMargin: "25"
  }
];

export default {
  data() {
    return {
      tableData,
      columns,
      search: ''
    }
  },
  methods: {
    onSearch() {   //搜索
    },
    reset() {  //重置
      this.search = ""
    }
  }
}
</script>
<style>
.ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
  padding: 12px 16px !important;
}
</style>
